<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>教练信息修改</title>
    <link rel="stylesheet" href="../../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../../css/okadmin.css">
</head>
<body style="width: 87%">
<fieldset class="layui-elem-field layui-field-title">
    <legend>个人中心</legend>
</fieldset>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-row layui-col-space15" style="width: 75%;margin: 0 auto">
                <div class="layui-row">
                    <div class="layui-col-xs6">
                        <div style="margin-top: 13px;">
                            <img style="margin-left: 13%;max-width: 380px;max-height: 270px;min-width: 260px;min-height: 140px"
                                 id="photo"
                                 src="../../images/userImgError.png">
                            <p id="photoText" style="margin-top: 10px;text-align: center;"></p>
                        </div>
                        <button class="layui-btn layui-btn-normal layuiadmin-btn-list" lay-submit
                                style="margin-left: 30%;margin-top: 53px;" id="updatePhoto">
                            修改头像
                        </button>
                    </div>
                    <div class="layui-col-xs6">
                        <div class="layui-row">
                            <div class="layui-col-xs6">
                                <fieldset class="layui-elem-field">
                                    <legend>ID</legend>
                                    <div class="layui-field-box" id="coachId">

                                    </div>
                                </fieldset>
                            </div>
                            <div class="layui-col-xs6">
                                <fieldset class="layui-elem-field">
                                    <legend>姓名</legend>
                                    <div class="layui-field-box" id="fullname">

                                    </div>
                                </fieldset>
                            </div>

                        </div>
                        <div class="layui-row">
                            <div class="layui-col-xs6">
                                <fieldset class="layui-elem-field">
                                    <legend>性别</legend>
                                    <div class="layui-field-box" id="agender">
                                        男
                                    </div>
                                </fieldset>
                            </div>
                            <div class="layui-col-xs6">
                                <fieldset class="layui-elem-field">
                                    <legend>车辆</legend>
                                    <div class="layui-field-box" id="vehicle">
                                        加载中
                                    </div>
                                </fieldset>
                            </div>
                        </div>
                        <div class="layui-row">
                            <div class="layui-col-xs6">
                                <fieldset class="layui-elem-field">
                                    <legend>电话</legend>
                                    <div class="layui-field-box" id="phone">

                                    </div>
                                </fieldset>
                            </div>
                            <div class="layui-col-xs6">
                                <fieldset class="layui-elem-field">
                                    <legend>邮箱</legend>
                                    <div class="layui-field-box" id="email">

                                    </div>
                                </fieldset>
                            </div>
                        </div>
                        <div class="layui-row">
                            <div class="layui-col-xs6">
                                <fieldset class="layui-elem-field">
                                    <legend>教学科目</legend>
                                    <div class="layui-field-box" id="teachingStage">
                                    </div>
                                </fieldset>
                            </div>
                            <div class="layui-col-xs6">
                                <fieldset class="layui-elem-field">
                                    <legend>教龄</legend>
                                    <div class="layui-field-box">
                                        <span id="joiningTime"></span>年
                                    </div>
                                </fieldset>
                            </div>
                        </div>
                        <div class="layui-row">
                            <fieldset class="layui-elem-field">
                                <legend>总评价</legend>
                                <div class="layui-field-box">
                                    <div class="lf_rate" id="score"
                                    ></div>
                                </div>
                            </fieldset>
                        </div>
                        <div class="layui-btn layui-btn-normal" style="float:right;margin-right: 40%;margin-top: 20px"
                             id="updateInformation">修改个人信息
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-row layui-col-space15" style="width: 80%;margin: 0 auto">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                    <legend style="font-size: 16px">学员评价</legend>
                    <span class="layui-btn layui-btn-xs layui-btn-primary showType"
                          style="float: right;cursor:pointer;margin-right: 10px" type="3">评分最低</span>
                    <span class="layui-btn layui-btn-xs layui-btn-primary showType"
                          style="float: right;cursor:pointer;margin-right: 10px" type="2">评分最高</span>
                    <span class="layui-btn layui-btn-xs layui-btn-normal showType" style="float: right;cursor:pointer;"
                          type="1">时间最近</span>
                </fieldset>
                <ul class="layui-timeline" id="evaluate">
                </ul>
                <div id="layPage" style="text-align: center"></div>
            </div>
        </div>
    </div>
</div>
</body>
<div style="display: none;margin-bottom: 20px" id="coachUpdateBody">
    <form class="layui-from layui-form-pane"
          style="width: 550px;height: 500px;margin: 50px auto;box-shadow: #e3e3e3 10px 10px 30px 5px;padding-top: 80px">
        <div style="margin: 0 auto;width: 450px;height: 60px;text-align: center">
            <h2 style="color: #121a65">个人信息修改</h2>
        </div>
        <div style="margin: 0 auto;width: 400px;height: 270px;" class="layui-form">
            <div class="layui-form-item" style="margin-top: 30px">
                <label class="layui-form-label">I&#12288;&#12288;&#12288;D</label>
                <div class="layui-input-block " style="width: 290px;">
                    <input type="text" id="coachIdUpdate" name="coachIdUpdate" lay-verify="required"
                           style="background-color: #dcdcdc" disabled
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" style="margin-top: 30px">
                <div class="layui-inline">
                    <label class="layui-form-label">姓&#12288;&#12288;名</label>
                    <div class="layui-input-block " style="width: 290px;">
                        <input id="fullnameUpdate" name="fullnameUpdate" type="text"
                               style="float: left;position: relative;"
                               class="layui-input"
                               placeholder="" lay-verify="required" autocomplete="off">
                    </div>
                </div>
            </div>
            <div class="layui-form-item" style="margin-top: 30px">
                <div class="layui-inline">
                    <label class="layui-form-label">电&#12288;&#12288;话</label>
                    <div class="layui-input-block " style="width: 290px;">
                        <input id="phoneUpdate" name="phoneUpdate" type="text" style="float: left;position: relative;"
                               class="layui-input"
                               placeholder="" lay-verify="phone" autocomplete="off">
                    </div>
                </div>
            </div>
            <div class="layui-form-item" style="margin-top: 30px">
                <div class="layui-inline">
                    <label class="layui-form-label">性&#12288;&#12288;别</label>
                    <div class="layui-input-block" style="width: 290px;">
                        <input type="radio" name="agender" id="agender0" value="0" title="女" checked>
                        <input type="radio" name="agender" id="agender1" value="1" title="男">
                    </div>
                </div>
            </div>
            <div class="layui-form-item" style="margin-top: 30px">
                <label class="layui-form-label">邮&#12288;&#12288;箱</label>
                <div class="layui-input-block " style="width: 290px;">
                    <input id="emailUpdate" name="emailUpdate" type="text" style="float: left;position: relative;"
                           class="layui-input"
                           placeholder="" lay-verify="email" autocomplete="off">
                </div>
            </div>
            <div class="layui-form-item" style="margin-top: 30px">
                <label class="layui-form-label">车&#12288;&#12288;辆</label>
                <div class="layui-input-block ">
                    <input type="text" id="vehicleUpdate" name="vehicleUpdate" lay-verify="required"
                           style="background-color: #dcdcdc" disabled
                           placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" id="editStudent" lay-submit lay-filter="editStudent" class="layui-btn"
                            style="width:400px;margin-top:30px; float: right">修&#12288;改
                    </button>
                </div>
            </div>
        </div>

    </form>
</div>
<div id="replyEvaluate" style="display: none">
    <div class="layui-form">
        <div class="layui-form-item" style="margin-top: 3%">
            <fieldset class="layui-elem-field">
                <div class="layui-col-xs10">
                <textarea id="replyEvaluateContent" type="text/plain" placeholder="此处填写回复信息"
                          style="width:100%;height:250px;margin-left: 40px;resize:none;"></textarea>
                    <div class="layui-btn layui-btn-normal" style="margin-left: 52%;"
                         id="pushReplyEvaluate">回复
                    </div>
                </div>
            </fieldset>
        </div>
    </div>
</div>
<div id="replyEvaluateOk" style="display: none">
    <div class="layui-form">
        <div class="layui-form-item" style="margin-top: 3%">
            <fieldset class="layui-elem-field">
                <div class="layui-col-xs10">
                <textarea id="replyEvaluateContentOk" type="text/plain" disabled
                          style="width:100%;height:250px;margin-left: 40px;resize:none;"></textarea>
                </div>
            </fieldset>
        </div>
    </div>
</div>
<script src="../../lib/layui/layui.js"></script>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/application.js"></script>
<script>
    var limit = 10
    var reply;
    layui.use(['form', 'layer', 'rate', 'upload', 'laypage'], function () {
        var form = layui.form,
            layer = layui.layer,
            rate = layui.rate,
            upload = layui.upload,
            laypage = layui.laypage;
        var coachId = "";
        var evaluateData;
        var replyEvaluateId = ""
        var page;
        var evaluateType=1;
        if (isEmpty(user['coachId'])) {
            layer.msg('账号信息异常,请重新登陆', {
                icon: 1,
                time: 1000
            }, function () {
                window.sessionStorage.setItem("user", "");
                window.location = mainUri + "/login.html";
            });
            return
        } else {
            myAjax(mainUri + "/coach/selectById", {"coachId": user['coachId']}, function (d) {
                if (d['code'] == 0) {
                    window.sessionStorage.setItem("user", JSON.stringify(d['data']));
                    user = d['data'];
                }
            })
            coachId = user['coachId']
            $("#coachIdUpdate").val(dataSetHtml('coachId', user))
            $("#fullnameUpdate").val(dataSetHtml('fullname', user))
            $("#phoneUpdate").val(dataSetHtml('phone', user))
            $("#emailUpdate").val(dataSetHtml('email', user))
            dataSetHtml('joiningTime', user, function (val) {
                $("#joiningTime").html((dateGapByDay(val) / 365).toFixed(1))
            })
            dataSetVal("photo", user, function (val) {
                $("#photo").attr("src", function () {
                    return isNoEmpty(val) ? MainIP + mainUri + "/" + val : '../images/userImgError.png'
                })
            })
            dataSetHtml('score', user, function (val) {
                $("#score").attr("lay-data", "{value:" + val / 2 + " ,readonly: true, text:true ,half:true}")
            })
            dataSetHtml('agender', user, function (val) {
                if (val == false) {
                    $("#agender").html("女");
                    $("#agender0").prop('checked', true);
                } else if (val == true) {
                    $("#agender").html("男")
                    $("#agender1").prop('checked', true);
                }
            })
            dataSetHtml("teachingStage", user, function (v) {
                $("#teachingStage").html(
                    function () {
                        if (v == 1) {
                            return "科目一"
                        } else if (v == "2") {
                            return "科目二"
                        } else if (v == "3") {
                            return "科目三"
                        } else if (v == 4) {
                            return "科目四"
                        }
                    }
                )
            })
            form.render();
            var cehicleData = ""
            myAjax(mainUri + "/vehicle/selects", {"coach.coachId": user['coachId']}, function (d) {
                if (d['code'] == 0) {
                    if (d['data'] && d['data'][0]) {
                        cehicleData = d['data'][0]['vehicleName'] + "(" + d['data'][0]['licensePlateNumber'] + ")"
                    } else {
                        cehicleData = "您当前还未分配到车辆"
                    }
                } else {
                    cehicleData = "车辆信息查询失败"
                }
                $("#vehicle").html(cehicleData)
                $("#vehicleUpdate").val(cehicleData)
            }, function () {
                $("#vehicle").html("查询异常")
                $("#vehicleUpdate").val("查询异常")
            })
        }
        //回复评论
        reply = function (id) {
            var cancel;
            replyEvaluateId = "";
            for (val of evaluateData) {
                if (val["evaluateId"] == id) {
                    replyEvaluateId = id;
                    if(isNoEmpty(val["reply"])){
                        $("#replyEvaluateContentOk").val(val["reply"])
                    }
                    break;
                }
            }
            var width = document.body.clientWidth / 3
            if (isEmpty(val["reply"])) {
                layer.open({
                    type: 1,
                    content: $('#replyEvaluate'), //这里content是一个普通的String
                    area: [width.toString() + 'px', '450px'],
                    shadeClose: true,
                    maxmin: true,
                    cancel: function (index, layero) {
                        if (confirm('确定关闭?关闭后不会保存填写的内容')) { //只有当点击confirm框的确定时，该层才会关闭
                            $("#replyEvaluateContent").val("")
                            layer.close(index)
                        }
                        return false;
                    }
                });
            } else {
                layer.open({
                    type: 1,
                    content: $('#replyEvaluateOk'), //这里content是一个普通的String
                    area: [width.toString() + 'px', '450px'],
                    shadeClose: true,
                    maxmin: true,
                    cancel: function (index, layero) {
                        layer.close(index);
                        return false;
                    }
                });
            }
        }
        $("#pushReplyEvaluate").on("click", function () {
            if (isEmpty(replyEvaluateId)) {
                return;
            }
            var data = {"evaluateId": replyEvaluateId, reply: $("#replyEvaluateContent").val()}
            showloading(true)
            myAjax(mainUri + "/evaluate/reply", data, function (d) {
                showloading(false)
                if (d['code'] == 0) {
                    setEvaluates();
                    layer.msg(d['msg'], {
                        icon: 1, time: 1500, end: function () {
                            layer.closeAll();
                        }
                    })
                }
            }, function () {
                showloading(false)
                layer.msg("回复评论失败,请重试");
            });
        })

        var setRate = function () {
            //多个评分
            layui.each($('.lf_rate'), function (index, elem) {

                var configTemp = $(elem).attr('lay-data');
                try {
                    configTemp = eval('(' + configTemp + ')');

                } catch (e) {
                    configTemp = {};

                }
                rate.render($.extend(true, {
                    elem: elem
                    , setText: function (value) { //自定义文本的回调
                        this.span.text((value * 2).toFixed(1));
                    }
                }, configTemp));

            });
        }

        setRate()

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#updatePhoto'
            , url: mainUri + '/coach/photoUpdate' //改成您自己的上传接口
            , accept: 'images'
            , acceptMime: 'image/jpg,image/png,image/bmp,image/jpeg'
            , exts: 'jpg|png|bmp|jpeg'
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#photo').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (res) {
                if (res['code'] == 0) {
                    window.sessionStorage.setItem("user", JSON.stringify(res['data']));
                    return layer.msg("头像修改成功");
                } else {
                    return layer.msg(res['msg']);
                }
                //上传成功
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#photoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });

        //监听提交
        form.on('submit(editStudent)', function (d) {
            if (isEmpty(d['field'])) {
                layer.msg("信息获取异常,请刷新重试")
                return
            }
            layer.confirm('确定修改个人信息?', function (index) {
                var data = {
                    coachId: user['coachId'],
                    agender: d['field']['agender'],
                    email: d['field']['emailUpdate'],
                    fullname: d['field']['fullnameUpdate'],
                    phone: d['field']['phoneUpdate']
                };
                myAjax(mainUri + "/coach/update", data, function (d) {
                    if (d['code'] == 0) {
                        window.sessionStorage.setItem("user", JSON.stringify(d['data']));
                        layer.msg(d['msg'], {
                            icon: 1, time: 1500, end: function () {
                                location.reload();
                            }
                        })
                    }
                })
            })
        })
        clickFunc("#updateInformation", function () {
            var width = document.body.clientWidth / 2
            layer.open({
                type: 1,
                content: $('#coachUpdateBody'), //这里content是一个普通的String
                area: [width.toString() + 'px', '850px'],
                shadeClose: true,
                maxmin: true,
            });
        })

        function getEvaluateHtml(d) {
            var top = '<li style="margin-bottom: 20px;" >\n' +
                '      <div class="layui-timeline-content layui-text">\n' +
                '       <h3 class="layui-timeline-title"><span>' + d['evaluateContent'] + '</span></h3>\n' +
                '       <p>\n' +
                '        <div class="lf_rate" lay-data="{value:' + d['score'] / 2 + ' ,readonly: true, text:true ,half:true}" ></div>\n';
            var content = "";
            if (isEmpty(d['reply'])) {
                content = '        <span class="layui-btn layui-btn-xs llayui-btn-normal" style="float: right;margin-right: 5%" onclick="reply(\'' + d["evaluateId"] + '\')">回复</span>\n';
            } else {
                content = '        <span class="layui-btn layui-btn-xs llayui-btn-normal " style="float: right;margin-right: 5%" onclick="reply(\'' + d["evaluateId"] + '\')">查看回复</span>\n';
            }
            var bottom = '        <span style="float: right;margin-right: 5%" >' + d['createDate'] + '</span>\n' +
                '         </p>\n' +
                '          </div>\n' +
                '       </li>\n' +
                '       <hr>'
            return top + content + bottom;
        }


        //分页
        function setEvaluates() {
            var data = {coachId: coachId, type: evaluateType, page: page, limit: limit}
            myAjax(mainUri + "/evaluate/selects", data, function (d) {
                if (d['code'] == 0) {
                    $("#evaluate").html("");
                    evaluateData = d['data']
                    for (val of d['data']) {
                        $("#evaluate").append(getEvaluateHtml(val))
                    }
                    setRate();
                }
            })
        }

        //加载评论
        function setEvaluate() {
            if(isEmpty(evaluateType)){
                evaluateType=1;
            }
            var data = {coachId: coachId, type: evaluateType, page: 1, limit: limit}
            myAjax(mainUri + "/evaluate/selects", data, function (d) {
                showloading(false)
                if (d['code'] == 0) {
                    laypage.render({
                        elem: 'layPage' //注意，这里的 test1 是 ID，不用加 # 号
                        , count: d['count'] //数据总数，从服务端得到
                        , limit: limit
                        , jump: function (obj, first) {
                            if (!first) {
                                page=obj.curr
                                setEvaluates()
                            }
                        }
                    });
                    evaluateData = d['data']
                    $("#evaluate").html("");
                    for (val of d['data']) {
                        $("#evaluate").append(getEvaluateHtml(val))
                    }
                    setRate();
                }
            },function(){
                showloading(false)
                layer.msg("评论获取失败");
            })
        }

        setEvaluate()

        $(".showType").on('click', function () {
            showloading(true);
            $(".showType").removeClass("layui-btn-normal")
            $('.showType').addClass("layui-btn-primary")
            $(this).removeClass("layui-btn-primary")
            $(this).addClass("layui-btn-normal")
            evaluateType=$(this).attr("type");
            setEvaluate()
        })
    });
</script>
</html>